import React, { useEffect, useState } from "react";
import axios from "axios";
import { Notify, List } from "react-vant";
import { ListItem } from "../index";
import { throttle, debounce } from 'lodash'
import { useNavigate } from "react-router-dom";

export interface ListItemState {
  avator: string;
  nickname: string;
  title: string;
  desc: string;
  url: string;
  id: string;
}

export const ActiveComp: React.FC = () => {
  const [list, setList] = useState<ListItemState[]>([]);
  const [pageCode, setPageCode] = useState<number>(1);
  const [finished, setFinished] = useState(false);
  const navigate = useNavigate()
  const fetchList = async () => {
    // await new Promise((resolve) => setTimeout(resolve, 2000));
    const resp = await axios.get("/api/list", { params: { pageCode } });
    const { code, data, message } = resp.data;
    if (code === 200) {
      setList([...list, ...data]);
      setPageCode(pageCode + 1);
      Notify.show({ type: "success", message });
    } else {
      setFinished(true);
    }
  };


	const throttleFetchList = throttle(fetchList, 200)

  return (
    <div>
      <List
        finished={finished}
        onLoad={() => throttleFetchList()}
        finishedText="没有更多数据了"
        loadingText="数据加载中..."
      >
        {list.map((v, i) => {
          return <ListItem key={i} {...v} onClick={ () => navigate('/detail/' + v.id)  }></ListItem>;
        })}
      </List>
    </div>
  );
};

export default ActiveComp;
